<template>
  <div ref="chartEl" style="height: 100%"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { defineProps } from 'vue';
//import { defineProps } from 'vue';
import * as echarts from 'echarts'

const props = defineProps({
  data: Array // 修改为 Array 以支持多条曲线的数据
})

const chartEl = ref(null)
let chartInstance = null

onMounted(() => {
  chartInstance = echarts.init(chartEl.value)
  updateChart()
})

watch(() => props.data, updateChart)

function updateChart() {
  const series = props.data.map((seriesData, index) => ({
    name: index === 0 ? '实际热度' : '预测热度', // 修改 name 属性以便 legend 使用
    data: seriesData.data,
    type: 'line',
    smooth: true,
    itemStyle: { color: index === 0 ? '#1890ff' : '#ff4d4f' } // 为不同的曲线设置不同的颜色
  }))

  const option = {
    legend: {
      data: series.map(s => s.name) // 使用 series 的 name 属性作为 legend 的数据
    },
    xAxis: {
      type: 'category',
      data: props.data[0].xAxis // 假设所有曲线共享相同的 x 轴数据
    },
    yAxis: { type: 'value' },
    series: series,
    grid: { containLabel: true },
    tooltip: { // 添加 tooltip 配置
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    }
  }
  chartInstance.setOption(option)
}
</script>